import { useEffect, useState } from "react";
import Navbar from "../../compoents/Navbar";
import request from "../../api/request";
import { useNavigate, useParams } from "react-router-dom";
import { Card, Button } from "antd-mobile";
import style from "./index.module.css";
import imag1 from "../../../public/photo103.jpg";
import imag2 from "../../../public/photo203.jpg";
import imag3 from "../../../public/photo303.jpg";
import imag4 from "../../../public/photo403.jpg";
import dayjs from "dayjs";
interface Doctor {
  doctorimage: string;
  doctorname: string;
  socostate: string;
  doctorstate: string;
  socoadmin: string;
  sococity: string;
  textid: string;
  doctorprice: string;
  socoid: string;
  textdise: string;
  [key: string]: unknown;
}

interface ReviewItem {
  classifyid: number;
  classifytitle: string;
}

interface ApiResponse {
  code: number;
  data: Doctor[];
}

interface ReviewApiResponse {
  code: number;
  data: ReviewItem[];
}
function Index() {
  const navigate = useNavigate();
  const { id } = useParams();

  // dayjs获取时间

  const [date, setDate] = useState(dayjs().format("YYYY-MM-DD HH:mm:ss"));

  // 获取医生信息
  const [doctor, setDoctor] = useState<Doctor | null>(null);

  useEffect(() => {
    const getDoctor = async () => {
      const res = await request.get("/api/doctor/detail", {
        params: {
          id: id,
        },
      });
      console.log("医生信息", res);
      const response = res as unknown as ApiResponse;
      if (response.code === 20000) {
        setDoctor(response.data[0]); // 只取第一条数据
      }
    };
    getDoctor();
  }, [id]);

  const [review, setReview] = useState<ReviewItem[]>([]);
  const [randomTags, setRandomTags] = useState<ReviewItem[]>([]);

  const getReview = async () => {
    const res = await request.get("/api/review/classify");
    console.log("评论信息", res);
    const response = res as unknown as ReviewApiResponse;
    if (response.code === 20000) {
      setReview(response.data);
      // 随机选择4个评价类型（排除"全部"）
      const filteredData = response.data.filter(
        (item) => item.classifytitle !== "全部"
      );
      const shuffled = [...filteredData].sort(() => 0.5 - Math.random());
      setRandomTags(shuffled.slice(0, 4));
    }
  };

  useEffect(() => {
    getReview();
  }, []);

  // 获取评论列表
  const [msgList, setMsgList] = useState([]);

  const getMsgList = async () => {
    const res = await request.get("/api/review/list", {
      params: {
        id
        // state:classifytitle
      },
    });
    console.log("评论列表", res);
  };

  useEffect(() => {
    getMsgList();
  }, []);

  // 获取锦旗列表

  const [flagList, setFlagList] = useState([]);

  const getFlagList = async () => {
    const res = await request.get("/api/review/banner");
    console.log("锦旗列表", res);
    if (res.code === 20000) {
      setFlagList(res.data);
    }
  };

  useEffect(() => {
    getFlagList();
  }, []);
  return (
    <div className={style.docBox}>
      <Navbar title="妙手医生网络诊室" showBack onBack={() => navigate(-1)} />

      <div style={{marginTop:46,marginBottom:80}}>
        <div>
          {doctor && (
            <Card className={style.cardTop}>
              <div className={style.cardSty}>
                <img src={doctor.doctorimage} alt="" />

                <div>
                  <div>
                    <span className={style.docname}>{doctor.doctorname}</span>
                    <span className={style.docspan}>{doctor.socostate}</span>
                  </div>

                  <div>
                    <span>{doctor.doctorstate}</span>
                    <span className={style.docshu}>|</span>
                    <span>{doctor.socoadmin}</span>
                  </div>

                  <span>{doctor.sococity}</span>
                </div>
              </div>

              <div className={style.gird}>
                <span>
                  <b>{doctor.textid}</b>
                </span>
                <span>
                  <b>100%</b>
                </span>
                <span>
                  <b>{doctor.doctorprice}分钟</b>
                </span>
                <span>
                  <b>{doctor.socoid}</b>
                </span>

                <span>
                  <p className={style.mes}>浏览人次</p>
                </span>
                <span>
                  <p className={style.mes}>好评率</p>
                </span>
                <span>
                  <p className={style.mes}>平均响应</p>
                </span>
                <span>
                  <p className={style.mes}>粉丝数</p>
                </span>
              </div>

              <p className={style.docMsg}>擅长:{doctor.textdise}</p>
              <span className={style.docJian}>查看简介</span>
              <span className={style.docGuan}>+关注</span>
            </Card>
          )}

          {doctor && (
            <Card className={style.CardHead}>
              <div>
                <h3>医生服务</h3>
                <div className={style.girdIcon}>
                  <span>
                    <img src={imag1} alt="" />
                  </span>
                  <span>
                    <img src={imag2} alt="" />
                  </span>
                  <span>
                    <img src={imag3} alt="" />
                  </span>
                  <span>
                    <img src={imag4} alt="" />
                  </span>

                  <span>
                    <b>在线资讯</b>
                  </span>
                  <span>
                    <b>复诊开方</b>
                  </span>
                  <span>
                    <b>优选药房</b>
                  </span>
                  <span>
                    <b>门诊预约</b>
                  </span>

                  <span>
                    <p>1对1问医生</p>
                  </span>
                  <span>
                    <p>未开通</p>
                  </span>
                  <span>
                    <p>未开通</p>
                  </span>
                  <span>
                    <p>预约线下就诊</p>
                  </span>
                </div>
              </div>
            </Card>
          )}

          {review && (
            <Card className={style.CardBox}>
              <div>
                <h3>评价</h3>

                {/* 第一条评论的4个随机评价类型标签 */}
                <div className={style.firstComment}>
                  <div className={style.commentContent}>
                    <p>这是一条用户评论内容...</p>
                    <div className={style.commentTags}>
                      {randomTags.map((tag, index) => (
                        <span key={index} className={style.tag}>
                          {tag.classifytitle}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>

                <div className={style.firstComment}>
                  <div className={style.commentContent}>
                    <p>这是一条用户评论内容...</p>
                    <div className={style.commentTags}>
                      {randomTags.map((tag, index) => (
                        <span key={index} className={style.tag}>
                          {tag.classifytitle}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>

                <div className={style.firstComment}>
                  <div className={style.commentContent}>
                    <p>这是一条用户评论内容...</p>
                    <div className={style.commentTags}>
                      {randomTags.map((tag, index) => (
                        <span key={index} className={style.tag}>
                          {tag.classifytitle}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          )}

          <Card className={style.CardFlag}>
            <div className={style.Cardflagtitle}>
              <h3>锦旗</h3> <span>查看更多</span>
            </div>

            {flagList.length > 0 &&
              flagList.map((item, index) => (
                <Card key={index} className={style.CardFlagItem}>
                  <div className={style.cardflagid}>
                    <p>山东日照*********赠送{item.bannerstate}</p>
                    <span>{date}</span>
                  </div>
                  <img src={item.bannerimage} alt="" />
                 
                </Card>
                
              ))}
               <span className={style.flagtextmsg}>我要送锦旗</span>
          </Card>
        </div>

        <div className={style.send}>
          <Button className={style.flagBtn} block color="primary">
            发消息
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Index;
